<template>
    <el-form ref="form" :model="form" label-width="80px" @submit.prevent="onsubmit" style="margin:20px;width:80%;min-width:600px;">
        <el-col :span="8">
            <el-form-item label="用户名">
                <el-input name="username" v-model="form.user.username" disabled></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="24">
            <el-col :span="8">
                <el-form-item label="姓名">
                    <el-input v-model="form.user.realname" v-bind:readonly="isReadonly"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="学号">
                    <el-input v-model="form.user.workid" v-bind:readonly="isReadonly"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="性别">
                    <div v-show="!update">
                        <span v-if="form.user.sex==1">男</span>
                        <span v-if="form.user.sex==2">女</span>
                    </div>
                    <div v-show="update">
                        <el-radio v-model="form.user.sex" label="1">男</el-radio>
                        <el-radio v-model="form.user.sex" label="2">女</el-radio>
                    </div>
                </el-form-item>
            </el-col>
        </el-col>
        <el-col :span="24">
            <el-col :span="8">
                <el-form-item label="邮箱">
                    <el-input v-model="form.user.email" v-bind:readonly="isReadonly"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="手机">
                    <el-input v-model="form.user.mobile" v-bind:readonly="isReadonly"></el-input>
                </el-form-item>
            </el-col>
        </el-col>
        <el-col :span="24">
            <el-form-item>
                <el-button type="primary" round v-show="!update" @click.prevent="edit">修改</el-button>
                <el-button round v-show="update" @click.prevent="back">返回</el-button>
            </el-form-item>
        </el-col>
    </el-form>
</template>

<script>
    export default {
        name: "personal-info",
        data(){
            return {
                update:false,
                isReadonly:true,
                form:{
                    user:{
                        username:'',
                        realname:'',
                        sex:'',
                    },
                }
            }
        },
        methods:{
            getData(){
                const user = JSON.parse(localStorage.getItem('CurrentUser'));
                this.$http.get('/api/user/find/'+user.id).then(res => {
                    if(res.data.code){
                        this.$message({
                            message:"获取数据异常，请刷新重试或重新登录",
                            type:"warning"
                        });
                    }else {
                        this.form.user = res.data.user;
                    }
                }).catch((error) => {
                    this.loginLoading=false;
                    if(error) console.log(error);
                });
            },
            edit(){
                this.update = true;
                this.isReadonly = false;
            },
            back(){
                this.getData();
                this.update = false;
                this.isReadonly = true;
            },
            onsubmit(){

            }
        },
        mounted(){
            this.getData();
        }
    }
</script>

<style scoped>

</style>